<template>
  <footer>
    <ul>
      <!-- a链接  声明式导航    编程式导航 就是用js来控制 -->
      <!-- <li><a href="./#/center">我的</a></li>
      <li><a href="./#/cinema">影院</a></li> -->

      <!-- vue-router 路由链接声明式导航    active-class意思差不多是被选中的链接会有aaa这个class-->
      <!-- router-link 加载到页面默认为a标签，而tag可以把这个改掉，这边就是默认为按钮了 -->
      <!-- 底部选项卡 -->
      <router-link to='/films'
                   active-class="active"
                   tag="li"><i class="iconfont icon-dianying"></i><span>电影</span></router-link>
      <router-link to='/cinema'
                   active-class="active"
                   tag="li"><i class="iconfont icon-yingyuan"></i><span>影院</span></router-link>

      <router-link to='/center'
                   active-class="active"
                   tag="li"><i class="iconfont icon-wode"></i><span>我的</span></router-link>

    </ul>
  </footer>
</template>
<script>
import '../assets/iconfont/iconfont.css'
export default {

}
</script>
<style scoped>
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.125rem;
  background: wheat;
  z-index: 1000;
}
footer ul {
  display: flex;
}
footer li {
  list-style: none;
  flex: 1;
  line-height: 1.5625rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.active {
  color: red;
}
i {
  font-size: 1.25rem;
}
span {
  font-size: 1rem;
}
</style>